import React, { useMemo } from "react";
import { Cell, Pie, PieChart, ResponsiveContainer, Tooltip } from "recharts";
import { STAT_COLORS } from "../../../../constants";
import { QuestionRadioStatPropsType } from "./interface";

const StatComponent: React.FC<QuestionRadioStatPropsType> = ({ stat = [] }) => {
  const sum = useMemo(() => {
    return stat.reduce((previous, current) => previous + current.count, 0);
  }, [stat]);

  return (
    <ResponsiveContainer width="100%" height="100%">
      <PieChart>
        <Pie
          dataKey="count"
          data={stat}
          cx="50%"
          cy="50%"
          outerRadius={50}
          label={(i) => `${i.name}: ${((i.count / sum) * 100).toFixed(2)}%`}
        >
          {stat.map((i, index) => {
            return <Cell key={index} fill={STAT_COLORS[index]} />;
          })}
        </Pie>
        <Tooltip />
      </PieChart>
    </ResponsiveContainer>
  );
};

export default StatComponent;
